
<div id="app">
    <template>
        <el-row :gutter="20">
            <el-col :span="3">
            </el-col>
        </el-row>
        <el-button type="primary" @click="add" v-if="vote">添加分组</el-button>

        <el-table
                :data="list"
                border
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    prop="vote"
                    label="投票活动" align="center">
                <template slot-scope="scope">
                    {{ vote.name}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编号" align="center">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle size="small"
                               @click="edit(scope.row)"></el-button>
                    <el-popconfirm title="是否确定删除？" @confirm='del(scope.row.id)'>
                        <el-button slot="reference" type="danger" icon="el-icon-delete" circle size="small"></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="投票分组"
                :visible.sync="dialog"
                :close-on-click-modal="false" center>

            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" :inline="false"
                     class="demo-form-inline">
                <el-form-item label="编号" prop="code">
                    <el-input v-model="form.code" placeholder="请输入编号"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <div style="text-align: center">
                    <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定'
                        }}
                    </el-button>
                    <el-button @click="cancelForm">取 消</el-button>
                </div>
            </el-form>
        </el-dialog>

    </template>
</div>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                vote: [],
                list: [],
                dialog: false,
                loading: false,
                form: {
                    id: 0,
                    vote_id: 0,
                    name: '',
                    code: '',
                    type: '',
                },
                rules: {
                    code: [
                        {required: true, message: '请输入编号', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            this.form.vote_id = getParam('vote_id')
            get('/addons/kzvote/vote/detail', {vote_id:getParam('vote_id')}).then(res => {
                this.vote = res.data;
            })
            this.ajax();
        },
        methods: {
            ajax() {
                get('/addons/kzvote/vote/group', {vote_id:getParam('vote_id')}).then(res => {
                    this.list = res.data
                })
            },
            submit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        post('/addons/kzvote/vote/group', this.form).then(res => {
                            this.loading = false;
                            this.$message({
                                type: res.code === 1 ? 'success' : 'error',
                                message: res.msg
                            });
                            if (res.code === 1) {
                                this.dialog = false;
                                this.ajax()
                            }
                        }).catch(err => {
                            this.$message({
                                type: 'error',
                                message: err
                            });
                            this.loading = false;
                        })
                    }
                });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
            },
            add() {
                this.dialog = true;
                this.form = {
                    id: 0,
                    vote_id: getParam('vote_id'),
                    type: 'insert',
                    name: '',
                    code: '',
                }
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                })
            },
            edit(row) {
                this.dialog = true;
                this.form = {
                    id: row.id,
                    vote_id: row.vote_id,
                    type: 'update',
                    name: row.name,
                    code: row.code,
                }
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                })
            },
            del(id) {
                get('/addons/kzvote/vote/group', {id: id,type: 'del'}).then(res => {
                    this.$message({
                        type: res.code === 1 ? 'success' : 'error',
                        message: res.msg
                    });
                    if (res.code === 1) {
                        this.ajax()
                    }
                })
            },
        }
    })
</script>
<style>

</style>